Day 2 標題有特別說到是建置TypeScript的預設環境,代表開發者其實可以自行決定Compiler如何檢查與轉換程式碼,而 tsconfig檔案 就是TypeScript用來提供開發者設定Compiler的檢查與轉換行為。
今天主要目的是知道可設定的常用組態,希望不會像前幾天一樣過於冗長(汗)。
如前言所說,tsconfig檔是讓TypeScript知道如何去檢查與轉換程式碼的檔案,如果根目錄有這份檔案,Compiler就會遵循 tsconfig 內設定好的組態去執行它的任務,而這些組態大致就是用來:
動手以前要再次提醒的是,tsconfig檔必須被放置在專案根目錄。此外前面也有說到tsconfig檔可以自行設定根目錄,總之確認檔案的確是放在根目錄即可。
tsconfig檔可供設定的組態至少有一百個,但不是所有組態都需要設定,這邊只需先知道常用組態就好。
如果是第一次建立檔案,在這之前可先使用一道指令:
tsc --init
此時專案內會產生一份 tsonfig.json。
tsonfig.json 檔案內是 compilerOptions 其中八大子類別的組態預設值和說明,例如:專案本身(Projects)、程式語言與環境相關 (Language and Environment)、模組相關 (Modules)、JavaScript支援方式 (JavaScript Support)、輸出相關的 (Emit)、兼容性限制 (Interop Constraints)、型別檢查 (Type Checking)和完整性檢查(Completeness)。

但tsonfig檔可供設定的組態不只有這些,在TSConfig的官方文件內首先包含與 compilerOptions 同層級的其他根領域(Root Fields)組態像是 files、extends、includes、excludes、references,而 compilerOptions 底下也有其他如 Editor Support、Output Formatting、Watch Options 等子類別,由於官方文件有更詳細的說明,這裡就不贅述了。
為了檔案內容的簡潔,這裡不使用 tsc --init 產生的檔案,而是自行建立一份 tsconfig.json,以下範例整理一些重要和常用的組態,並附上一些可參考選用的組態:
{
"compilerOptions": {
"target": "ES5", // 編譯後的JavaScript程式碼版本
/* Modules */
"module": "CommonJS", // 編譯後產生的模組形式 (註:設定為commonjs通常是為了能讓程式在Node上執行)
"rootDir": "./src", // 設定編譯根目錄
/* JavaScript Support */
"allowJs": true, // 允許js檔案是否被TypeScript Compilet檢查 (官方建議可設"checkJs"為true來取得錯誤報告)
"checkJs": true, // 會對js檔案進行型別檢查且輸出錯誤報告
/* Emit */
"sourceMap": true, // 可建立來源檔案與輸出的js檔案關係map
"outDir": "./public", // 編譯器編譯後的js檔案放置處 (註:public通常是要部署專案到伺服器用的資料夾)
"removeComments": true, // 不會輸出註解
"noEmit": true, // 可避免輸出不符型別檢查的js檔案, 例如Day 1的string型態變數再賦值number值的範例
/* Interop Constraints */
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true, // 對import進來的模組檔名強制作大小寫轉換, 可避免如 import LearnTS.ts 寫成 import learnTS.ts 的大小寫錯誤
/* Type Checking */
"strict": true
"noImplicitAny": true // 不允許未指定型別的變數
"alwaysStrict":true // 採用JavaScript嚴格模式檢查型別, 並且會在輸出的每一份JS檔案首行加上 "use strict"
},
"files": ["type.ts", "type.spec.ts"], // 編譯檔案白名單, 意即指定要編譯的檔案 (不可用glob指定檔案或資料夾)
"include": ["src"], // 編譯白名單, 意即指定要編譯的檔案和資料夾
"exclude": ["node_modules", "**/*.spec.ts"] // 編譯黑名單, 意即指定不要編譯的檔案和資料夾
}
以上範例有幾個要點需注意:
files 只適合檔案少的專案且不能用glob模式匹配方式去指定多個資料夾或檔案;include;include 包含的資料夾底下,但匹配到 exclude 內有指定的檔名,如 src 資料夾下有檔名符合 \*\*/*.spec.ts 形式的檔案,則檔名匹配到 \*\*/*.spec.ts 的檔案都不會被編譯;files 中的檔案即使有匹配到 exclude 指定檔名,如範例的 type.spec.ts,還是會被編譯。由這幾點舉例可知檔案被編譯的優先權是 files > exclude > include
然後要留意的是文件介紹中有提到
When input files are specified on the command line, tsconfig.json files are ignored.
意思是如果像 Day 2 一樣用 tsc index 的方式去編譯檔案(index.ts),則編譯器會忽略tsconfig檔案的組態設定去編譯這份檔案。
後記
事實上 tsconfig 檔案可以是 tsconfig.json 或 jsconfig.json,這兩者之中的其中一種檔案(檔名)都可對TypeScript Compiler的編譯行為作設定,只不過通常都是用 tsconfig.json。
參考資料
What is a tsconfig.json
TypeScript: TSConfig Reference
Understanding the glob pattern in Node.js